<template>
  <div class="search-list-container searchHeight">
    <div class="search-wrapper">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="auto"
      >
        <el-form-item label="请选择IP段地址" prop="ipAddress">
          <el-select v-model="queryParams.ipAddress" placeholder="请选择">
            <el-option
              v-for="item in ipSelectList"
              :key="item.id"
              :label="item.ipAddress"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请输入IP段地址" prop="ipHandAddress">
          <el-input
            v-model="queryParams.ipHandAddress"
            placeholder="请输入IP段地址"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          class="search-icon"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form>
    </div>
    <div class="list-wrapper">
      <!-- <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            @click="batchImport"
            v-hasPermi="['system:registration:edit']"
            >导入</el-button
          >
        </el-col>
      </el-row> -->
      <div class="address-monitor-list" v-loading="loading">
        <div
          v-for="(item, index) in addressMonitorList"
          :key="index"
          class="list-item"
          @click="handleDetail(item)"
        >
          <div>{{ item.ipAddress }}</div>
          <div class="list-item-bottom">
            <span>总:{{ item.ipSize }}</span>
            <span>分配:{{ item.ipUseSize }}</span>
            <span>空闲:{{ item.ipNoneUseSize }}</span>
          </div>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        :pageSizes.sync="pageSizes"
        @pagination="getIPAddressList"
      />
    </div>
    <detail
      :showDialog.sync="showDialog"
      :detail="detail"
      v-if="showDialog"
    ></detail>
  </div>
</template>

<script>
import Detail from "./ipDetail.vue";
import {
  getIPAddressList,
  getSelectIPList,
} from "@/api/businessSupport/businessManagement.js";
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 9,
      },
      total: 100,
      addressMonitorList: [],
      loading: false,
      ipSelectList: [],
      pageSizes: [9, 18, 27, 36],
      showDialog: false,
      detail: {},
    };
  },
  components: {
    Detail,
  },
  methods: {
    async getSelectIPList() {
      const result = await getSelectIPList();
      this.ipSelectList = result.data;
    },
    handleQuery() {
      this.getIPAddressList();
    },
    resetQuery() {
      this.$refs["queryForm"].resetFields();
      this.queryParams.pageSize = 9;
      this.queryParams.pageNum = 1;
      this.getIPAddressList();
    },
    // 批量导入
    batchImport() {},
    handleDetail(item) {
      this.detail = item;
      this.showDialog = true;
    },
    async getIPAddressList() {
      this.loading = true;
      const result = await getIPAddressList(this.queryParams);
      this.loading = false;
      this.addressMonitorList = result.data.records;
      this.total = result.data.total;
    },
  },
  mounted() {
    this.getSelectIPList();
    this.getIPAddressList();
  },
};
</script>

<style lang="scss" scoped>
.searchHeight {
  height: calc(100% - 54px) !important;
}
.search-icon {
  margin-left: 30px !important;
}
::v-deep .el-upload {
  text-align: left;
}
::v-deep .el-upload div {
  margin: 10px 0;
}
.address-monitor-list {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  align-content: space-between;
  gap: 10px;
  overflow: auto;
  color: #fff;
  .list-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32%;
    height: 30%;
    padding: 20px;
    border: 1px solid #63bff9;
    &-bottom {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>